import SEO from '../components/SEO'

<SEO
  title="SimpleGrid"
  description="SimpleGrid provides a friendly interface to create responsive grid layouts with ease. It renders a div element with display: grid."
/>

# SimpleGrid

SimpleGrid provides a friendly interface to create responsive grid layouts with ease. It renders a div element with display: grid.

<carbon-ad />

## Import

```js
import { CSimpleGrid } from '@chakra-ui/vue'
```

## Usage

Specifying the number of columns for the grid layout.

```vue live=true
<c-simple-grid :columns="2" :spacing="10">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>
```

You can also make it responsive by passing array or object values into the
`columns` prop.

```vue live=true
<c-simple-grid :columns="[2, null, 3]" spacing="40px">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>
```

### Auto-responsive grid

To make the grid responsive adjust automatically without passing `columns`,
simply pass the `minChildWidth` prop to specify the `min-width` a child should
have before adjusting the layout.

This uses css grid `auto-fit` and `minmax()` internally.

```vue live=true
<c-simple-grid min-child-width="120px" spacing="40px">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>
```

### Changing the spacing for columns and rows

Simply pass the `spacing` prop to change the row and column spacing between the
grid items. `SimpleGrid` also allows you pass `spacingX` and `spacingY` to
define the space between columns and rows respectively.

```vue live=true
<c-simple-grid :columns="2" spacing-x="40px" spacing-y="20px">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>
```

## Props

SimpleGrid composes `Box` so you can pass all the `Box` props and CSS grid props
with the addition of these:

| Name            | Type                        | Default | Description                                                                                                                           |
| --------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `columns`       | `number`                    |         | The number of columns                                                                                                                 |
| `spacing`       | `GridProps["gridGap"]`      |         | The gap between the grid items                                                                                                        |
| `spacingX`      | `GridProps["gridGap"]`      |         | The column gap between the grid items                                                                                                 |
| `spacingY`      | `GridProps["gridGap"]`      |         | The row gap between the grid items                                                                                                    |
| `minChildWidth` | `CSSProperties["minWidth"]` |         | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |
